<template>
  <div class="purchase-page">
    <van-nav-bar
      title="购买商品"
      left-text="返回"
      left-arrow
      @click-left="clickLeft"
    />
    <div class="address-field" @click="toAddress">
      <div>
        <span>{{ firstAddressItem.name }}</span>
        <span>{{ firstAddressItem.telephone }}</span>
        <div class="address">{{ addressDesc }}</div>
      </div>
      <i class="iconfont icon-iconfontjiantou3"/>
    </div>
    <div class="name-price">
      <img :src="goodsInfo.IMAGE1" width="96%" />
      <div>{{ goodsInfo.NAME }}</div>
      <div>
        <span class="original-price">原价：¥ {{ goodsInfo.ORI_PRICE | toMoney}}</span>
        <span class="present-price">现价：¥{{ goodsInfo.PRESENT_PRICE | toMoney }}</span>
      </div>
    </div>
    <div class="btn-field">
      <van-button type="primary" size="large" @click="showModal">提交订单</van-button>
    </div>
    <van-popup v-model="popupShow">
      <img src="https://cs-static-assets.oss-cn-beijing.aliyuncs.com/ds_system/redbag.jpg" width="100%" />
    </van-popup>
  </div>
</template>

<script>
  import axios from 'axios';
  import requestUrl from '../../serverApi';
  import toMoney from '../../filter/moneyFilter';
  import Bus from '../../bus';
  export default {
    data() {
      return {
        firstAddressItem: {},
        goodsInfo: {},
        popupShow: false,
        goodsId: this.$route.query.goodsId,
      }
    },
    created() {
      const { addressId } = this.$route.query;
      if (addressId) {
        // 加载指定的地址
       this.getDetailAdderss(addressId);
      } else {
        this.getAddess();
      }
      this.getGoodsInfo();
    },
    filters: {
      toMoney: function(value) {
        return toMoney(value);
      }
    },
    methods: {
      clickLeft() {
        this.$router.go(-1);
      },
      toAddress() {
        this.$router.push({name: 'Address', query: {goodsId: this.goodsId}});
      },
      getDetailAdderss(addressId) {
        const url = `${requestUrl.getAddressInfo}?addressId=${addressId}`;
        axios.get(url).then((res) => {
          const data = res.data;
          const { message, code } = data;
          if (code === 200 && message) {
            this.firstAddressItem = message;
          }
        }).catch((err) => {
          console.log(err);
        });
      },
      getAddess() {
        axios.get(requestUrl.getAddressList).then((res) => {
          const data = res.data;
          if (data.code === 200 && data.message) {
            this.firstAddressItem = data.message[0];
          }
        }).catch((err) => {
          console.log(err);
        });
      },
      getGoodsInfo() {
        const detailUrl = `${requestUrl.goodsDetail}?goodsId=${this.goodsId}`;
        axios.get(detailUrl).then(res => {
          const data = res.data;
          // 查找不到数据的时候，data.message为null
          if (data.code === 200 && data.message) {
            this.goodsInfo = data.message;
          } else {
            Toast.fail('获取数据失败');
          }
        }).catch(err => {
          Toast.fail('获取数据失败');
        })
      },
      showModal() {
        this.popupShow = true;
      },
    },
    computed: {
      addressDesc() {
        return `${this.firstAddressItem.province || ''}${this.firstAddressItem.city || ''}${this.firstAddressItem.county || ''}`;
      }
    },
  }
</script>

<style scoped>
  .purchase-page {
    background-color: #fff;
  }
  .address-field {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    border-bottom: 1px solid lightgray;
  }
  .address {
    color: gray;
  }
  .name-price {
    padding: 10px;
    font-size: 14px;
  }
 .original-price {
   text-decoration: line-through;
   color: red;
   margin-right: 10px;
 }
  .btn-field {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
</style>